import * as React from 'react';
import {Input,Card} from 'antd';
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';

import Typing from '../../../utils/typing'

const { Search } = Input;

export default class Map extends React.Component {

  componentWillUnmount() {
    this.scene.destroy();
  }

  static defaultProps = {
    title: '全网物联网设备',
    source:'输入需要的更新的起止ip，获取IoT风险识别探测结果',
    height:136
  }

  async componentDidMount() {
    
    const typing = new Typing({
      source:this.source,
      output:this.output,
      delay:30
    })
    typing.start()

    const scene = new Scene({
      id: 'map',
      map: new Mapbox({
        pitch: 40,
        style: {
          version: 8,
          sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
          glyphs:
            'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
          sources: {},
          layers: [
            {
              id: 'background',
              type: 'background',
              paint: {
                'background-color': '#f0f2f5'
              }
            }
          ]
        },
        center: [ 3.438, 40.16797 ],
        zoom: 0.51329
      })
    });
    scene.on('loaded', () => {
      Promise.all([
        fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
        fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
        fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
      ]).then(function onLoad([ world, dot, flyline ]) {
        const dotData = eval(dot);
        const flydata = eval(flyline).map(item => {
          const latlng1 = item.from.split(',').map(e => { return e * 1; });
          const latlng2 = item.to.split(',').map(e => { return e * 1; });
          return { coord: [ latlng1, latlng2 ] };
        });
        // const worldFill = new PolygonLayer()
        //   .source(world)
        //   .color('#98E3FA')
        //   .shape('fill')
        //   .style({
        //     opacity: 1
        //   });
    
        const worldLine = new LineLayer()
          .source(world)
          .color('#333')
          .size(0.6)
          .style({
            opacity: 0.2
          });
        const dotPoint = new PointLayer()
          .source(dotData, {
            parser: {
              type: 'json',
              x: 'lng',
              y: 'lat'
            }
          })
          .shape('circle')
          .color('#abc7e9')
          .animate({
            speed: 0.8
          }
          )
          .size(30)
          .style({
            opacity: 1.0
          });
        const flyLine = new LineLayer()
          .source(flydata, {
            parser: {
              type: 'json',
              coordinates: 'coord'
            }
          })
          .color('#8cf')
          .shape('arc3d')
          .size(2)
          .active(true)
          .animate({
            interval: 2,
            trailLength: 2,
            duration: 1
          })
          .style({
            opacity: 1
          });
        // scene.addLayer(worldFill);
        scene.addLayer(worldLine);
        scene.addLayer(dotPoint);
        scene.addLayer(flyLine);
      });
    });
    this.scene = scene;
  }

  render() {
    return (
      <div> 
        <Card hoverable bordered={false} className='card-item' title={this.props.title} style={{minHeight:this.props.height}} id={this.props.id}>
          <div style={{display:'none'}} ref={el => this.source = el} dangerouslySetInnerHTML={{__html:this.props.source}}/>
          <div ref={el => this.output = el}/>
          <br/>
          <Input.Group compact>
            <Input style={{ width: "30%", textAlign: 'center' }} placeholder="起始IP" />
            <Input
              className="site-input-split"
              style={{
                width: 40,
                borderLeft: 0,
                borderRight: 0,
                pointerEvents: 'none',
              }}
              placeholder="~"
              disabled
            />
            <Search
              className="site-input-right"
              style={{
                width: '40%',
                textAlign: 'center',
              }}
              placeholder="结束ip"
              enterButton="开始扫描"
            />
          </Input.Group>
        </Card>
        <div
          id="map"
          style={{
            minHeight: 500,
            // position: 'absolute',
            // top: 0,
            // left: 0,
            // right: 0,
            // bottom: 0,
          }}
        />
      </div>
     
    );
  }
}
